'use strict'
 import React from "react";
 import {render} from 'react-dom';
 import {Link} from 'react-router';

 //引入工具类
 import MMALL_COM from 'util/comm.jsx';
 import USER from 'service/user_service.jsx';
 import './index.scss';
 var _comm = new MMALL_COM();
 var _user = new USER();


 class NavTop extends React.Component{
    constructor(props){
        super(props);
        this.state={
            userName:''
        };
        this.onLogout=this.onLogout.bind(this);
    }
    componentDidMount(){
        let userInfo = _comm.getStorage('userInfo');
        if(userInfo){
            let userName=userInfo.username||'';
            this.setState({userName:userName});
        }
    }
    //退出登录
    onLogout(){
        _user.logout().then(
            res=>{
                _comm.successTip('退出成功');
                _comm.doLogin();
            },
            mgs=>{
                _comm.errorTip('退出失败，请稍后再试');
            })
        
    }
    //渲染页面
    render() {
        return (
            <div>
                <div className="navbar-header">
                    <button type="button" className="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span className="sr-only">Toggle navigation</span>
                        <span className="icon-bar"></span>
                        <span className="icon-bar"></span>
                        <span className="icon-bar"></span>
                    </button>
                    <a className="navbar-brand" href="#/">MMALL ADMIN</a>
                </div>
                <ul className="nav navbar-top-links navbar-right">
                    <li className="dropDown">
                        {   
                            //判断userName是否已存在
                            this.state.userName ? 
                            <span>欢迎，{this.state.userName}</span> :
                            <span>欢迎</span>
                        }
                        
                    </li>
                    <li className="dropDown">
                        <a className="btn-logout" onClick={this.onLogout}>退出</a>
                    </li>
                </ul>
            </div>
        );
    }
 }
 export default NavTop;
